
import { NavBar, Toast } from '@nutui/nutui-react'
import { ArrowLeft } from '@nutui/icons-react'
import { useLocation, useNavigate } from 'react-router-dom';
import {http} from '../../utils'
import { ConfigProvider, Input, Button,Notify } from '@nutui/nutui-react'
import { useState } from 'react';
const PutUser = () => {
    const navigate = useNavigate();
    const location = useLocation();
    const [inputVal, setInputVal] = useState(location.state.user)

    const handleSubmit =async () => {
        let res = await http.post('/main/putUser', {user:inputVal })
        if(res.code == 200){
            Notify.success('更新成功',{ duration: 1000 })
            navigate('/outlet/selfMessage')
        }else{
            Notify.warn('更新失败，请重新尝试',{ duration: 1000 })
        }
    }

    const darkTheme = {
        nutuiNavbarBackground: '#ffffff',
        nutuiInputPadding: '0.1rem 0',
        nutuiInputFontSize: '0.18rem',
        nutuiButtonDefaultHeight:"0.4rem"
    };
    return (
        <div style={{paddingTop:"0.15rem"}}>
            <ConfigProvider theme={darkTheme}>
                <NavBar
                    back={<ArrowLeft />}
                    onBackClick={(e) => navigate(-1)}
                >
                    修改昵称
                </NavBar>
                <div style={{ marginTop: "0.6rem", padding: "0 0.4rem" }}>
                    <Input
                        placeholder="请输入文本"
                        onChange={(value) => setInputVal(value)}
                        value={inputVal}
                    />
                    <p style={{ fontSize: '0.12rem', color: "#9f9f9f",marginTop: "0.1rem",marginBottom: "0.4rem" }}>
                        可输入2-20个字符的昵称，支持中文、英文、数字、下划线及其组合~
                    </p>
                    <Button 
                        type="default" 
                        color='linear-gradient(to right, #ff9600 , #fe4801)'
                        block
                        onClick={handleSubmit}
                    >
                        确定
                    </Button>
                </div>
            </ConfigProvider>

        </div>
    )
}
export default PutUser;




